<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" title="新闻列表" />
      <view class="news-list">
        <view v-if="newsList.length > 0">
          <view v-for="(item, idx) in newsList" :key="idx" class="news-item" @tap="toNewsDetail(item)">
            <view class="news-title">
              <text v-if="item.title">{{ item.title }}</text>
              <!-- <text v-if="item.content">：</text>
              <text v-if="item.content">{{ item.content }}</text> -->
            </view>
            <view class="news-time">{{ formatTime(item.createtime) }}</view>
          </view>
        </view>
        <view v-else class="empty-state">
          <image :src="imgUrl + 'empty-news.png'" class="empty-icon" mode="aspectFit" />
          <text class="empty-text">暂无新闻数据</text>
          <text class="empty-desc">敬请期待更多精彩内容</text>
        </view>
      </view>
    </view>
    <movable-area class="movable-area" >
      <movable-view class="fab-container" direction="all" :x="x" :y="y" @tap="getNewsCustomer">
        <image :src="imgUrl + 'customerService2.png'" class="fab-icon" />
      </movable-view>
    </movable-area>
  </scroll-view>
</template>

<script setup>
  import { ref, computed, onMounted } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config'
  import { formatTime } from '@/utils/dateUtils.js'
  import { useRequest } from '@/api';
  import { onShow } from '@dcloudio/uni-app';
  const appStore = useOutsideAppStore()
  const navHeight = computed(() => appStore.navHeight)
  const scrollTop = ref(0)
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }
  const { API_NEWS_INDEX_POST, API_NEWS_CUSTOMER_GET } = useRequest()
  const x = ref(300);
  const y = ref(500);
  onMounted(() => {
    const { windowWidth, windowHeight } = uni.getSystemInfoSync();
    x.value = windowWidth - 60; // 50px width + 10px margin
    y.value = windowHeight - 150; // Adjust based on bottom bar height and safe area
  });
  onShow(() => {
    getNewsList();//获取新闻列表
  })
  const newsList = ref([])

  // 获取新闻列表
  const getNewsList = async () => {
    let params = {
      page: 1,
      page_size: 10
    }
    newsList.value = [];
    try {

      const res = await API_NEWS_INDEX_POST(params)
      console.log('getNewsList', res)

      if (res.code === 1) {
        if (res.data.data.length > 0) {
          newsList.value = res.data.data;
        } else {
          newsList.value = [];
        }
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }
    } catch (error) {
      console.error('获取新闻列表失败:', error)
      uni.showToast({ title: error.message, icon: 'none' })
    }
  }
  const toNewsDetail = (item) => {
    console.log('toNewsDetail', item);

    uni.navigateTo({
      url: `/pages/news/newsDetail/index?id=${item.id}`
    })
  }
  const getNewsCustomer = async () => {
    console.log('getNewsCustomer+++++');
    try {

      const res = await API_NEWS_CUSTOMER_GET()
      console.log('getNewsCustomer————————————', res)

      if (res.code === 1) {
        // newsDetail.value = res.data;
        // // 拨打电话
        // uni.makePhoneCall({
        //   phoneNumber: '4000692928'
        // });
        // 拨打电话
        uni.makePhoneCall({
          phoneNumber: res.data.customer
        });
      } else {
        // uni.showToast({ title: res.msg, icon: 'none' })
      }
    } catch (error) {
      console.log("error>>>>>>>+++++", error)
      uni.showToast({ title: error.response?.data.msg, icon: 'none' })
    }
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>